<template>
  <div class="attention">
    <ul class="topNav">
      <li @click="$router.go(-1)">
        <img src="../assets/FindImg/4.png" alt="">
      </li>
      <li @click="$router.push('/collect')">收藏</li>
      <li>关注</li>
    </ul>
    <div v-if="attention.length == 0" class="content">
      <van-empty class="custom-image" image="http://m.yougou.com/images/empty.png" description="你未关注任何品牌噢！" />
    </div>
    <div v-if="attention.length != 0" class="attention">
      <ul>
        <li v-for="(data,index) in attention" :key="index">
          <div class="attentionList">
            <img class="logo" :src="data.img" alt="">
            <div class="attInfo">
              <p>{{data.name}}</p>
              <div class="attInfoNum">
                <img src="../assets/goodsLists/isFocus.png" alt="">
                <span>{{data.attenNum}}</span>
              </div>
            </div>
            <span class="focus" @click="goBrand">进入品牌</span>
          </div>
          <div class="unFocus" @click="unFocus(index)">取消关注</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "Attention",
  data() {
    return {
      checked: true,
      activeIcon: require("../assets/goodsLists/isFocus.png"),
      inactiveIcon: require("../assets/goodsLists/unFocus.png"),
      attention: [
        {
          img: require("../assets/classify/hot6.png"),
          name: "addidas 阿迪达斯",
          attenNum: "已有1.1万人关注",
        },
        {
          img: require("../assets/classify/hot6.png"),
          name: "addidas 阿迪达斯",
          attenNum: "已有3.2万人关注",
        },
      ],
    };
  },
  methods: {
    goBrand() {
      this.$router.push("/goodsList");
    },
    unFocus(index) {
      console.log(Dialog);
        Dialog.confirm({
          message: "您确认要取消对该品牌的关注吗？",
        })
        .then(() => {
          // 确认
          this.attention.splice(index, 1);
        })
        .catch(() => {
          // 取消
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.attention {
  width: 100%;
  height: 100vh;
  .topNav {
    width: 100%;
    height: 53px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #f9f9f9;
    border-bottom: 1px solid #c5c5c5;
  }
  .topNav li:nth-of-type(1) img {
    width: 14px;
    height: 25px;
    position: absolute;
    top: 18px;
    left: 15px;
  }
  .topNav li:nth-of-type(2) {
    color: #888888;
    position: absolute;
    top: 16px;
    left: 129px;
  }
  .topNav li:nth-of-type(3)::after {
    content: "";
    width: 35px;
    height: 3px;
    display: block;
    background-color: #000000;
    border-radius: 5px;
    position: absolute;
    left: 0;
    bottom: -13px;
  }
  .topNav li:nth-of-type(3) {
    color: #1f1f1f;
    font-size: 17px;
    position: absolute;
    top: 16px;
    left: 223px;
  }
  .content {
    width: 100%;
    ::v-deep .custom-image {
      margin-top: 140px;
      .van-empty__image {
        width: 170px;
        height: 166px;
      }
      .van-empty__description {
        font-size: 16px;
        margin-top: 35px;
        font-family: PingFangSC-Regular;
        color: #999999;
        letter-spacing: 0;
      }
    }
  }
  .attention {
    width: 100%;
    height: 100%;
    ul {
      width: 100%;
      overflow: hidden;
      li {
        width: 100%;
        height: 103px;
        display: flex;
        overflow-x: auto;
        border-bottom: 1px solid #dad9d9;
        .attentionList {
          flex-shrink: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          justify-content: space-between;
          .logo {
            width: 63px;
            height: 63px;
            border: 1px solid #c4c2c2;
            border-radius: 50%;
          }
          .attInfo {
            width: 180px;
            p {
              font-size: 14px;
            }
            .attInfoNum {
              img {
                width: 12px;
                height: 12px;
                margin-top: 5px;
              }
              span {
                font-size: 12px;
                line-height: 14px;
                color: #888;
                margin-left: 5px;
              }
            }
          }
          .focus {
            background: #fd4765;
            width: 75px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #ffffff;
          }
        }
        .unFocus {
          width: 63px;
          flex-shrink: 0;
          height: 100%;
          font-size: 12px;
          background-color: #333;
          color: white;
          text-align: center;
          padding: 35px 15px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>